<template>
  <block>
    <view class="index">
      <Detail
        :circle="circle"
        :showFollow="false"
        @reply="handleReply"
        @report="handleReport"
      />
    </view>
    <view
      v-show="inputShow"
      class="comment-input"
      :style="`bottom: ${inputBottom}px`"
      :animation="animationData"
    >
      <van-field
        type="textarea"
        :autosize="{ maxHeight: 100, minHeight: 50 }"
        :value="commentContent"
        @focus="handleFocus"
        @blur="handleBlur"
        @confirm="submitComment"
        @input="handerInputChange"
        :placeholder="placeholder"
        :adjust-position="true"
        :focus="focus"
        confirm-type="send"
      />
    </view>
    <van-action-sheet
      :show="reportShow"
      :actions="actions"
      @cancel="reportShow = false"
      @select="submitReport"
      cancel-text="取消"
    />
  </block>
</template>

<script>
import Taro from '@tarojs/taro'
import { getDetail, publishComment, report } from '@requests/circle'
import { getParam, toLogin, toast } from '@utils/index'
import Detail from '@components/circle/common/circle/index'
const animation = Taro.createAnimation({
  duration: 500,
  timingFunction: 'ease'
})
export default {
  name: 'FindCars',
  data() {
    return {
      circle: {},
      focus: false,
      inputShow: false,
      inputBottom: 0,
      animationData: null,
      commentContent: '',
      replyCircle: null,
      placeholder: '回复:',
      reportShow: false,
      actions: [{ name: '举报', color: '#006CFF' }]
    }
  },
  components: { Detail },
  computed: {},
  created() {
    this.getDetail()
  },
  onShareAppMessage() {
    return {
      title: '亿车商二手车海量真实车源信息对接'
    }
  },
  methods: {
    handleReport(circle) {
      this.reportCircle = circle
      this.reportShow = true
    },
    submitReport() {
      report(this.circle.content_id).then(res => {
        this.reportShow = false
        toast.info('已收到您的举报，工作人员将立即核实')
      })
    },
    getDetail() {
      getDetail(getParam('id')).then(res => {
        this.circle = res.result
      })
    },
    handleFocus(e) {
      animation.translateY(0).step() //注意动画移动到0，可能是因为键盘弹起改变了body的位置
      this.inputShow = true
      this.focus = true
    },
    handleBlur(e) {
      this.inputBottom = 0
      this.inputShow = false
      this.focus = false
      animation.translateY(0).step()
      this.animationData = animation.export()
    },
    handerInputChange(e) {
      this.commentContent = e.detail
    },
    getRef() {
      return this.type === 1 ? this.$refs.recommend : this.$refs.focus
    },
    submitComment() {
      if (!this.commentContent) {
        toast.info('评论不能为空')
        return
      }
      publishComment({
        content_id: this.circle.content_id,
        to_user_id:
          !this.replyCircle.reply_user_id ||
          this.replyCircle.reply_user_id ===
            this.$store.state.user.userInfo.user_id
            ? 0
            : this.replyCircle.reply_user_id,
        content: this.commentContent
      }).then(res => {
        this.commentContent = ''
        this.handleBlur()
        this.getDetail()
      })
    },
    handleReply(replyCircle) {
      if (!this.$store.state.user.token) {
        toLogin()
        return
      }
      this.replyCircle = replyCircle
      this.placeholder =
        !replyCircle.reply_user_id ||
        replyCircle.reply_user_id === this.$store.state.user.userInfo.user_id
          ? '回复:'
          : `回复${replyCircle.reply_user_name}:`
      this.handleFocus()
    }
  }
}
</script>

<style>
.comment-input {
  position: fixed;
  left: 0;
  right: 0;
  background: #f9f9f9;
  padding: 24rpx;
  z-index: 1000;
}
</style>
